<script setup>

import UNavbar from "@/uni_modules/uview-plus/components/u-navbar/u-navbar.vue";
import {ref} from "vue";
import {my, saveUserInfo, upload} from "../../request/api";
import {onLoad, onShow} from "@dcloudio/uni-app";
import UPopup from "@/uni_modules/uview-plus/components/u-popup/u-popup.vue";
import {BASEURL} from "@/request/request";
import {getMonthRangeTimestamps, timestampToDate} from "../../utils";
const userinfo = ref(uni.getStorageSync('userinfo'));
const show = ref(false);//修改资料
onShow(()=>{
  getUserinfo();
})
//页面跳转
const navigateTo = (url) => {
  uni.navigateTo({
    url
  })
}

const getUserinfo = () => {
  my().then(res=>{
    userinfo.value = res.data;
    uni.setStorageSync('userinfo',res.data);
  })
}
//选择头像
const chooseAvatar = async (e) => {
  let url =  await upload(e.detail.avatarUrl)
  userinfo.value._image =BASEURL+ url;
}
const handlerSave = () => {
  if (!userinfo.value._image) return uni.showToast({
    title:'请上传头像',
    icon:'none'
  })
  if (!userinfo.value._name) return uni.showToast({
    title:'请输入昵称',
    icon:'none'
  })
  saveUserInfo({
    image:userinfo.value._image,
    name:userinfo.value._name,
  }).then(()=>{
    uni.showToast({
      title:'保存成功',
      icon:'none'
    });
    show.value = false;
    getUserinfo();
  })
}
const loginOut = () => {
  uni.clearStorageSync();
  uni.reLaunch({
    url:'/pages/login/login'
  })
}

</script>
<template>
  <u-popup closeable @close="show = false"  :round="16" title="修改资料" :show="show">
    <view  class="edit-info">
      <view class="item">
        <text>头像</text>
        <button open-type="chooseAvatar" @chooseavatar="chooseAvatar">
          <image :src="userinfo._image || '/static/avatar.png'"></image>
        </button>
      </view>
      <view class="item">
        <text>昵称</text>
        <view>
          <input  v-model="userinfo._name" type="nickname" placeholder="请输入昵称">
        </view>
      </view>
      <text @click="handlerSave">保存</text>
    </view>
  </u-popup>

  <view class="mine-page">
    <u-navbar placeholder title="我的" left-icon=""></u-navbar>
    <scroll-view scroll-y class="scroll-y">
      <view class="container">
        <view @click="show = false" class="userinfo">
          <view class="avatar">
            <image :src="userinfo.image ?BASEURL+userinfo.image : '/static/avatar.png'"></image>
<!--            <image src="/static/edit.png"></image>-->
          </view>
          <view class="name">
            <text>{{userinfo.name}}</text>
            <text>{{userinfo.number}}</text>
          </view>
        </view>
<!-- v-if="userinfo.type==='销售经理'"       -->
        <view  @click="navigateTo('/pages/sales-order/sales-order')" class="full">
          <image src="/static/full-order.png"></image>
        </view>
        <view class="base-box">
          <view @click="navigateTo('/statistics/pages/individual-statistics/individual-statistics')" class="item">
            <view>
              <image src="/static/user1.png"></image>
              <text>单人业绩统计</text>
            </view>
            <image src="/static/more.png"></image>
          </view>
          <view @click="navigateTo('/statistics/pages/department-statistics/department-statistics')" class="item">
            <view>
              <image src="/static/user4.png"></image>
              <text>分部门业绩统计</text>
            </view>
            <image src="/static/more.png"></image>
          </view>
          <view v-if="userinfo.type==='财务人员'" @click="navigateTo('/statistics/pages/gross-profit-statistics/gross-profit-statistics')" class="item">
            <view>
              <image src="/static/user5.png"></image>
              <text>毛利统计</text>
            </view>
            <image src="/static/more.png"></image>
          </view>
        </view>
        <view class="base-box">
          <view v-if="false" class="item">
            <view>
              <image src="/static/user2.png"></image>
              <text>我的设置</text>
            </view>
            <image src="/static/more.png"></image>
          </view>
          <button open-type="contact">
            <view class="item">
              <view>
                <image src="/static/user3.png"></image>
                <text>联系客服</text>
              </view>
              <image src="/static/more.png"></image>
            </view>
          </button>

        </view>

        <view @click="loginOut" class="login-out">退出登录</view>
      </view>
    </scroll-view>
  </view>
</template>


<style scoped lang="scss">
.login-out{
  width: 100%;
  height: 88rpx;
  margin-top: 24rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 28rpx;
  color: #333;
  background-color: #F5FAFF;
  line-height: 40rpx;
}
.edit-info{
  height: 60vh;
  width: 100%;
  background: #F0F3F7;
  padding: 80rpx 30rpx 30rpx 30rpx;
  display: flex;
  flex-direction: column;

  > text {
    width: 100%;
    margin-top: 50rpx;
    height: 80rpx;
    background: #3563FF;
    border-radius: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 32rpx;
    color: #FFFFFF;
  }
  .item{
    padding: 30rpx;
    width: 100%;
    display: flex;
    background-color: #fff;
    align-items: center;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    justify-content: space-between;
    input{
      font-weight: 400;
      font-size: 32rpx;
      color: #333;
      text-align: right;
      line-height: 44rpx;
    }
    button{
      width: 100rpx;
      height: 100rpx;
      padding: unset;
      margin: unset!important;
      background-color: unset;
      &:after{
        border: unset;
      }
      image{
        width: 100rpx;
        border-radius: 50%;
        height: 100rpx;
      }
    }
    >text{
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
      line-height: 44rpx;
    }
  }
}
button{
  padding: unset!important;
  border: unset!important;
  &:hover{
    background-color: unset;
  }
  &:after{
    border: unset;
  }
}
.mine-page {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #fff;

  .container {
    padding: 30rpx 40rpx;
    width: 100%;
    .base-box{

      width: 100%;      background: #F5FAFF;
      border-radius: 16rpx;
      margin-top: 26rpx;
      .item{
        height: 136rpx;
        width: 100%;
        padding: 0 47rpx 0 18rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        >image{
          width: 12rpx;
          height: 24rpx;
        }
        view{
          display: flex;
          align-items: center;
          text{
            font-weight: 500;
            margin-left: 16rpx;
            font-size: 32rpx;
            color: #333333;
            line-height: 33rpx;
          }
          image{
            width: 44rpx;
            height: 44rpx;
          }
        }
        background: #F5FAFF;
        border-radius: 16rpx;
      }
    }
    .full{
      width: 100%;
      height: 114rpx;
      margin-top: 25rpx;
      image{
        width: inherit;
        height: inherit;
      }
    }

    .userinfo {
      width: 100%;
      display: flex;
      align-items: center;

      .name {
        display: flex;
        flex-direction: column;
        margin-left: 36rpx;

        text:last-child {
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
        }

        text:first-child {
          font-weight: bold;
          font-size: 46rpx;
          color: #333333;
        }
      }

      .avatar {
        width: 143rpx;
        height: 143rpx;
        position: relative;

        image:last-child {
          position: absolute;
          width: 42rpx;
          height: 42rpx;
          bottom: 9rpx;
          right: 0-13rpx;
        }

        image:first-child {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
